<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>菜单详情</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
</head>

<body>
    <div class="layui-fluid layui-bg-blue" style="height: 100;">
        <div class="layui-row" style="height: 100;">
            <div class="layui-col-xs12">
                <div class="grid-demo grid-demo-bg1">6/12</div>
            </div>
        </div>
    </div>
    <div class="layui-container">
        <blockquote class="layui-elem-quote">注意：下述演示中的颜色只是做一个区分作用，并非栅格内置。</blockquote>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>始终等比例水平排列</legend>
        </fieldset>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="grid-demo grid-demo-bg1">6/12</div>
            </div>
            <div class="layui-col-xs3">
                <div class="grid-demo grid-demo-bg1">6/12</div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs3">
                <div class="grid-demo grid-demo-bg1">3/12</div>
            </div>
            <div class="layui-col-xs3">
                <div class="grid-demo grid-demo-bg1">3/12</div>
            </div>
            <div class="layui-col-xs3">
                <div class="grid-demo grid-demo-bg1">3/12</div>
            </div>
            <div class="layui-col-xs3">
                <div class="grid-demo grid-demo-bg1">3/12</div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>移动设备、桌面端的组合响应式展现</legend>
        </fieldset>
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-md8">
                <div class="grid-demo grid-demo-bg1">移动：12/12、桌面：8/12</div>
            </div>
            <div class="layui-col-xs6 layui-col-md4">
                <div class="grid-demo">移动：6/12、桌面：4/12</div>
            </div>
            <div class="layui-col-xs6 layui-col-md12">
                <div class="grid-demo grid-demo-bg2">移动：6/12、桌面：12/12</div>
            </div>
        </div>
    </div>
</body>

</html>